// credits/pages/map/index.js
const normalCallout = {
  id: 1,
  latitude: 30.289359,
  longitude: 108.0354,
  width: 50,
  height: 50,
  iconPath: '../../images/location.png',
  callout: {
    content: '100m',
    color: '#ff0000',
    fontSize: 14,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: '#666666',
    bgColor: '#fff',
    padding: 5,
    display: 'ALWAYS', // 'ALWAYS'
    textAlign: 'center'
  },
  // label: {
  //   content: 'label 文本',
  //   fontSize: 24,
  //   textAlign: 'center',
  //   borderWidth: 1,
  //   borderRadius: 5,
  //   bgColor: '#fff',
  //   padding: 5
  // }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 30.287825,
    longitude: 108.0354,
    // latitude: null,
    // longitude: null,
    markers: [],
    includePoints: [],
    num: 1,
    currentStore: false,
    type: '',
    showMap: true,
    showText: false,
    shops:[],
    cityList: [],
    currentCity: {},
    showCitySheet: false,
  },
  markertap(e) {
    const { markerId } = e.detail
    
    this.setData({
      currentStore: this.shopList.find(item => item._id == markerId)
    })
  },
  handleClose() {
    this.setData({
      currentStore: null
    })
  },
  handleTypeClick(e) {
    const { type } = e.target.dataset
    if( type == '3') {
        this.setData({
            showMap : false,
            showText : true,
            type : '3',
            currentStore: null
        })
    } else {
        this.setData({
            showMap : true,
            showText : false,
            type
        }, () => {
          this.requestStoreList()
        })
    }
    
  },
  getLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res)
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        }, () => {
          this.mapCtx.moveToLocation(res)
        })
      }
    })
  },
  requestStoreList() {
    wx.ajax.post('getAllShops.action', { type: this.data.type, city: this.data.currentCity.name }).then((res) => {
      const { result } = res
      if (result.lenght == 0) {
        return
      }

      const markers = result.map(item => {
        item._id = this.index++
        return {
          id: item._id,
          latitude: item.lat,
          longitude: item.lon,
          width: 30,
          height: 30,
          iconPath: item.type == '1' ? '../../images/location-red.png' : '../../images/location.png',
          // callout: {
          //   content: item.shopName,
          //   color: '#ff0000',
          //   fontSize: 14,
          //   borderWidth: 1,
          //   borderRadius: 4,
          //   borderColor: '#eeeeee',
          //   bgColor: '#fff',
          //   padding: 5,
          //   display: 'ALWAYS',
          //   textAlign: 'center'
          // },
        }
      })
      const shops = result.map(item => {
        return {
            id: item._id,
            latitude: item.lat,
            shopName:item.shopName,
            personName:item.personName,
            phone:item.phone,
            type:item.type,
            persionName1:item.persionName1,
            persionName2:item.persionName2,
            persionName3:item.persionName3,
            phone1:item.phone1,
            phone2:item.phone2,
            phone3:item.phone3,
            address:item.address
        }
      })

      const setData = {
        markers,
        shops,
      }

      // if(!this.data.longitude) {
      //   setData.longitude = result[0].lon
      //   setData.latitude = result[0].lat
      // }

      this.shopList = result
      this.setData(setData, () => {
        // if (setData.longitude) {
        //   this.mapCtx.moveToLocation({
        //     longitude: setData.longitude,
        //     latitude: setData.latitude
        //   })
        // }
      })
    })
  },
  requestCityList() {
    wx.ajax.post('getAllShopCitys.action').then((res) => {
      const {result} = res
      this.setData({
        cityList: result
      }, () => {
        this.selectHandle({
          detail: result[0]
        })
      })
    })
  },
  titleClickHandle() {
    this.setData({
      showCitySheet: true
    })
  },
  closeHandle() {
    this.setData({
      showCitySheet: false
    })
  },
  selectHandle(event) {
    const city = event.detail
    
    if (city.id == this.data.currentCity.id) {
      return;
    }

    this.setData({
      currentCity: city,
      latitude: city.lat,
      longitude: city.lon,
    }, () => {
      // this.mapCtx.moveToLocation({
      //   latitude: city.lat,
      //   longitude: city.lon,
      // })
      this.requestStoreList()
    })
  },
  handleBack() {
    wx.navigateBack()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.index = 1
    this.mapCtx = wx.createMapContext('storeMap')
    this.requestCityList()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})